<template>
    <div class="app-container">

        <el-form :model="queryParams" ref="queryForm" class="search-form-new" :inline="true" label-width="68px">
            <el-form-item label="账号" prop="account">
                <el-input v-model="queryParams.account" placeholder="请输入要查询的账号" clearable />
            </el-form-item>
            <el-form-item class="btns">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="black-query-platform-list">
            <div class="platform-item" v-for="(value, index) in v2List">
                <div class="platform-bg" v-if="value.isTure"></div>
                <div class="avatar">
                    <img :src="value.remark" alt="">
                </div>
                <div class="detail">
                    <div class="platform-name"> {{ value.dictLabel }} </div>
                    <div class="platform-content">
                        <div v-if="!value.msg" class="ifBlack" style="color: rgb(170, 170, 170);">待开始</div>
                        <div v-if="!value.isTure && value.msg" class="ifBlack" style="color: rgb(7, 193, 96);">无黑号记录
                        </div>
                        <div v-if="value.isTure && value.msg" class="ifBlack" style="color: #f40;">{{ value.msg }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { exportBlackV2 } from "@/api/black/black";


export default {
    data() {
        return {
            queryParams: {
                account: ''
            },
            v2List: []
        }
    },
    mounted() {
        this.getDicts('black_channel').then(r => {
            this.v2List = r.data
        })
    },
    methods: {
        handleQuery() {
            if (!this.queryParams.account) {
                this.$message.warning('请输入要查询的账号!');
                return
            }
            const loginLoading = this.$loading({
                lock: true,
                text: '检测中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
                customClass: 'highlight-loadings',
            });
            exportBlackV2(this.queryParams).then(res => {
                if (res.code == 200 && res.data && res.data.cot > 0) {
                    this.$alert(`账号存在异常，当前${res.data.cot}家同行正在销售`, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    });
                }
                const dataMap = res.data.list.reduce((map, item) => {
                    console.log('当前 item:', map);
                    map[item.chanl] = {
                        isTure: item.isTure,
                        msg: item.msg,
                    };
                    return map;
                }, {});

                // 遍历 v2List 更新（此时用 v2Item.chanl 匹配 dataMap 的 key）
                this.v2List.forEach(v2Item => {
                    const matched = dataMap[v2Item.dictValue];
                    if (matched) {
                        this.$set(v2Item, 'isTure', matched.isTure);
                        this.$set(v2Item, 'msg', matched.msg);
                    }
                });
            }).finally(() => {
                loginLoading.close();
            });
        }
    },
};
</script>
<style scoped lang="scss">
.black-query-platform-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(364px, 1fr));
    gap: 16px;

    .platform-item {
        background-color: #fff;
        height: 160px;
        box-sizing: border-box;
        padding: 20px;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .1);

        .avatar {
            z-index: 1;
            position: relative;
            width: 60px;
            height: 60px;
            border-radius: 16px;
            overflow: hidden;
            margin-right: 10px;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .detail {
            z-index: 1;
            position: relative;

            .platform-name {
                color: #111;
                font-weight: 400;
                font-size: 20px;
                line-height: 28px;
                margin-bottom: 10px;
            }

            .ifBlack {
                font-weight: 600;
                font-size: 16px;
                line-height: 22px;
            }
        }
    }

    .platform-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(250, 94, 0, 0) 50%, rgba(250, 94, 0, .2));
    }
}
</style>

<style lang="scss">
.highlight-loadings {
    /* 1. 提高层级，覆盖其他内容 */
    z-index: 9999 !important;

    /* 2. 加载动画放大 + 颜色突出 */
    .el-loading-spinner {
        top: 45% !important;
        /* 居中偏上，更醒目 */
        transform: translateY(-50%) scale(1.5);
        /* 放大 1.5 倍 */

        .el-icon-loading {
            font-size: 48px !important;
            /* 图标放大 */
            color: #409eff !important;
            /* 亮蓝色，对比深色背景 */
            animation: rotate 1.5s linear infinite;
            /* 加快旋转速度 */
        }

        /* 3. 文字强化 */
        .el-loading-text {
            margin-top: 20px !important;
            font-size: 18px !important;
            color: #fff !important;
            /* 白色文字，与深色背景对比 */
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            /* 文字阴影，增强可读性 */
        }
    }

    /* 4. 可选：添加背景动效（呼吸渐变） */
    &::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(64, 158, 255, 0.2) 0%, transparent 70%);
        animation: pulse 3s infinite;
    }

}

/* 自定义动画：加快旋转 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 自定义动画：呼吸效果 */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.3;
    }
}
</style>